<template>
  <div class="detail">
    <back-header></back-header>
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(item, index) in detailObj.pics2" :key="index">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <div class="expen">
      <h6>{{ detailObj.basicInfo?.name }}</h6>
      <p>{{ detailObj.basicInfo?.characteristic }}</p>
      <section>
        <span style="color: red"
          >低价￥{{ detailObj.basicInfo?.minPrice }}</span
        >
        <span> 原价￥{{ detailObj.basicInfo?.originalPrice }}</span>
        <span class="right">库存{{ detailObj.basicInfo?.stores }}</span>
      </section>
    </div>
    <detail-title @childTab="cut"></detail-title>
    <div v-html="detailObj.content" v-show="tabIndex == 0"></div>
    <div class="empty" v-show="tabIndex == 1">
      <van-empty description="暂无评价" />
    </div>
  </div>
  <van-action-sheet v-model:show="show" title=" ">
    <div class="cot-top">
      <img :src="detailObj.basicInfo.pic" alt="">
      <section>
        <p>{{detailObj.basicInfo.name}}</p>
        <span>￥{{detailObj.basicInfo.minPrice}}</span>
      </section>
    </div>
  </van-action-sheet>
  <van-action-bar>
    <van-action-bar-icon icon="chat-o" text="客服" color="#ee0a24" />
    <van-action-bar-icon icon="cart-o" text="购物车" />
    <van-action-bar-icon
      :icon="isStar ? 'star' : 'star-o'"
      :text="isStar ? '已收藏' : '未收藏'"
      color="#ff5000"
      @click="isStar = !isStar"
    />
    <van-action-bar-button type="warning" text="立即购买" />
    <van-action-bar-button type="danger" text="加入购物车" @click="show=true"/>
  </van-action-bar>
</template>

<script>
import { ref, reactive, toRefs } from "vue";
import { useRoute } from "vue-router";
import { detail } from "../../api/second/index";
import backHeader from "../../components/backHeader.vue";
import DetailTitle from "../../components/detailTitle.vue";
export default {
  components: { backHeader, DetailTitle },
  setup() {
    const route = useRoute();
    const id = route.params.id;
    // console.log(id);
    const data = reactive({
      detailObj: {}, // 详情页面的数据
      isStar: false, // 是否收藏
      show: false, // 规格的面板显示
    });
    const tabIndex = ref(0); // 0 就代表显示商品介绍，1就代表显示商品的评价
    detail({ id: id }).then((res) => {
      console.log(res);
      data.detailObj = res.data;
    });
    const cut = (val) => {
      // 商品介绍和商品评价的切换事件
      tabIndex.value = val;
    };
    return {
      ...toRefs(data),
      cut,
      tabIndex,
    };
  },
};
</script>
<style lang="scss" scoped>
.detail {
  height: 100%;
  background: #e9e9e9;
}
.my-swipe {
  img {
    width: 100%;
    height: 375px;
  }
}
.expen {
  padding: 0 10px;
  background: #fff;
  font-size: 13px;
  color: #999;
  overflow: hidden;
  margin-top: -2px;
  h6 {
    font-size: 16px;
    line-height: 50px;
    color: #000;
  }
  section {
    margin: 15px 0 10px;
    .right {
      float: right;
    }
  }
}
.cot-top{
  padding: 15px;
  display: flex;
  font-size: 13px;
  img{
    width: 62px;
    height: 62px;
    margin-right: 10px;
  }
  span{
    color: red;
    margin-top: 30px;
    display: block;
  }
}
</style>